<template>
  <div class="app-container">
    <div class="h-3 w-100 d-flex">
      <!-- 1号楼4层近一周故障次数走势图 -->
      <div class="h-100 w-6 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼4层近一周故障次数走势图</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 pt-1" id="line-first"></div>
          </div>
        </div>
      </div>
      <!-- 1号楼4层近一周能耗走势 -->
      <div class="h-100 w-6 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼4层近一周能耗走势</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 pt-1" id="line-second"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-3 w-100 d-flex">
      <!-- 1号楼4层 近1小时负载走势 -->
      <div class="h-100 w-6 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼4层 近1小时负载走势</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 pt-1" id="line-third"></div>
          </div>
        </div>
      </div>
      <!-- 1号楼4层控制记录 -->
      <div class="h-100 w-6 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼4层控制记录</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 pt-1">
              <noData v-if="config.data.length==0"></noData>
              <template v-else>
                <dv-scroll-board :config="config"/>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import noData from '@/components/noData'
  import charts from './chart.js'
  import {
    queryOneListHistoryByReport,
    queryTwoListHistoryByReport,
    queryThreeListHistoryByReport,
    queryFourListHistoryByReport
  } from "@/api/dormOneBuildingFourFloor/historicalData"

  export default {
    components: {noData},
    data() {
      return {
        timeout: [],

        oneCarData: {
          xData: [],
          seriesData: [],
        },
        twoCardData: {
          xData: [],
          seriesData: [],
        },
        threeCardData: {
          xData: [],
          seriesData1: [],
          seriesData2: [],
          seriesData3: [],
        },

        config: {
          header: ['设备名称', '合分动作', '状态', '操作人', '操作类型', '下发时间'],
          rowNum: 5, //表格行数
          headerHeight: 35, //表头高度
          headerBGC: '#368B9D', //表头
          // oddRowBGC: '', //奇数行
          // evenRowBGC: '', //偶数行
          index: true, //显示行号
          columnWidth: [60, 150, 80, 150, 120, 120], //列宽度
          align: ['center', 'center', 'center', 'center', 'center', 'center', 'center'] //列对齐方式
        },
      }
    },
    created() {
    },
    mounted() {
      setTimeout(() => {
        this.queryOneListHistoryByReport()
        this.queryTwoListHistoryByReport()
      }, 500)
      this.queryThreeListHistoryByReport()
      this.queryFourListHistoryByReport()

      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryOneListHistoryByReport()
        _this.queryTwoListHistoryByReport()
        _this.queryThreeListHistoryByReport()
      }, 600000);

      this.timeout[1] = setInterval(() => {
        _this.queryFourListHistoryByReport()
      }, 30000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryOneListHistoryByReport() {
        queryOneListHistoryByReport().then(res => {
          let tempData = res.object

          let xData = []
          let seriesData = []

          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue)
            seriesData.push(tempData[i].yValue)
          }

          this.oneCarData.xData = xData
          this.oneCarData.seriesData = seriesData

          charts.oneLineEchart('line-first', this.oneCarData)
        })
      },
      queryTwoListHistoryByReport() {
        queryTwoListHistoryByReport().then(res => {
          let tempData = res.object

          let xData = []
          let seriesData = []

          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue)
            seriesData.push(tempData[i].yValue)
          }

          this.twoCardData.xData = xData
          this.twoCardData.seriesData = seriesData

          charts.twoLineEchart('line-second', this.twoCardData)
        })
      },
      queryThreeListHistoryByReport() {
        queryThreeListHistoryByReport().then(res => {
          let tempData = res.object

          let xData = []
          let seriesData1 = []
          let seriesData2 = []
          let seriesData3 = []

          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue)

            let arr = tempData[i].yValue.split(',')
            seriesData1.push(parseFloat(arr[0]))
            seriesData2.push(parseFloat(arr[1]))
            seriesData3.push(parseFloat(arr[2]))
          }

          this.threeCardData.xData = xData
          this.threeCardData.seriesData1 = seriesData1
          this.threeCardData.seriesData2 = seriesData2
          this.threeCardData.seriesData3 = seriesData3

          charts.threeLineEchart('line-third', this.threeCardData)

        })
      },
      queryFourListHistoryByReport() {
        queryFourListHistoryByReport().then(res => {
          let tempData = res.object || []

          let arr = []
          for (let i = 0; i < tempData.length; i++) {
            let arr2 = []
            for (const resKey in tempData[i]) {
              if (resKey != 'deviceLocal') {
                if (resKey == 'deviceStatus') {
                  if (tempData[i][resKey] == '1') {
                    arr2.push('<span style="color:#07C160;">指令发送成功</span>')
                  } else if (tempData[i][resKey] == '2') {
                    arr2.push('<span style="color:#0755b4;">指令发送成功等待核验</span>')
                  } else if (tempData[i][resKey] == '3') {
                    arr2.push('<span style="color:#07C160;">操作成功</span>')
                  } else if (tempData[i][resKey] == '4') {
                    arr2.push('<span style="color:#debc10;">操作失败核验超时</span>')
                  } else {
                    arr2.push('<span style="color:#e30a35;">故障分闸</span>')
                  }
                } else if (resKey == 'operatorType') {
                  if (tempData[i][resKey] == 'person') {
                    arr2.push('<span>远程控制</span>')
                  } else {
                    arr2.push('<span>系统控制</span>')
                  }
                } else {
                  arr2.push(tempData[i][resKey])
                }
              }
            }
            arr.push(arr2)
          }

          this.$set(this.config, "data", arr)
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }
</style>
